<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <el-table
        ref="multipleTable"
        :data="datas"
        border style="width: 100%"
        stripe :height="divheight-50"
        @row-click="RowClick"
        size="small"
        @select="selectRow"
        :cell-class-name="cellclassname"
        @select-all="selectAll">
      <el-table-column fixed type="selection" width="55" label="选择"></el-table-column>
      <el-table-column fixed type="index" label="行号" width="55"></el-table-column>
      <el-table-column
          v-for="(item,index) in Tablelable"
          :min-width="item.tablewidth?item.tablewidth:200"
          :key="index"
          :prop="item.prop"
          :show-overflow-tooltip="true"
          :label="item.label"
          :formatter="formatDate"
          :type="item.type?item.type:'String'">
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;margin-left: 10px;">
      <el-pagination
          small="small"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchpage.pageNo"
          :background="true"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="searchpage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchpage.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

import {postRequest} from "@/utils/Request/NewApiRequest";
import {powercolumn} from "@/power/columns";

export default {
  name: "f_table",
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    power:{
      type:String,
      default:''
    },
    url:{
      type:String,
      default:""
    },
    // where是查询条件
    where:{
      type:Object,
      default:Object
    },
    divheight:{
      type:Number,
      default:650
    }
  },
  data() {
    // 这里存放数据
    return {
      loading:false,// 加载
      searchpage:{
        pageNo:1,// 当前页
        pageSize:20,// 每页的数据量
        keyword:"", // 搜索关键字
        pages:0,// 一共有多少页
        total:0,// 一共有多少条数据
        args:this.where// 额外条件
      },
      datas: [],// 展示的数据
      selectedRows:[],// 选中的元素
      Tablelable:[],// 表格列
    }
  },
  // 方法集合
  methods: {
    /**
     * 获取数据
     * @constructor
     */
    LoadData(){
      const _this = this;
      const url = _this.url;
      const data = _this.searchpage;
      _this.loading = true
      postRequest(url,data).then((data)=>{
        _this.selectedRows = []
        _this.datas = data.records
        _this.searchpage.pages = data.pages
        _this.searchpage.pageSize = data.size
        _this.searchpage.total = data.total
        _this.searchpage.pageNo = data.current
        _this.loading = false
      }).catch(err=>{
        _this.loading = false
      })
    },
    handleSizeChange(val) {
      this.searchpage.pageSize = val
      this.LoadData()
    },
    handleCurrentChange(val) {
      this.searchpage.pageNo = val
      this.LoadData()
    },
    // 表格中某一行被点击
    RowClick(row){
      if (row) {
        this.$refs.multipleTable.toggleRowSelection(row);
        // 判断选中行是否已存在于 selectedRows 数组中
        const index = this.selectedRows.findIndex(selectedRow => this.isEqual(selectedRow, row));
        if (index === -1) {
          // 选中行不存在于 selectedRows 数组中，将其添加到数组
          this.selectedRows.push(row);
        } else {
          // 选中行已存在于 selectedRows 数组中，将其从数组中移除
          this.selectedRows.splice(index, 1);
        }
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 选中行的Checkbox事件
    selectRow(selection, row){
      if (row) {
        const index = this.selectedRows.findIndex(selectedRow => this.isEqual(selectedRow, row));
        if (index === -1) {
          // 选中行不存在于 selectedRows 数组中，将其添加到数组
          this.selectedRows.push(row);
        } else {
          // 选中行已存在于 selectedRows 数组中，将其从数组中移除
          this.selectedRows.splice(index, 1);
        }
      }
    },
    // 全选
    selectAll(selection){
      this.selectedRows = []
      selection.forEach((x)=>{
        this.selectedRows.push(x)
      })
    },
    // 全选的Checkbox事件
    // 自定义判断两行数据是否相等的函数
    isEqual(row1, row2) {
      // 自定义判断两行数据是否相等的函数
      // 这里可以根据你的实际数据结构来自定义判断逻辑
      return JSON.stringify(row1) === JSON.stringify(row2);
    },
    // 父组件获取选择的单行数据
    selectRowEvent(callBack){
      if (this.selectedRows.length>1 || this.selectedRows.length===0){
        this.$message.warning("请选择一行数据！")
        return false;
      }
      let row = this.selectedRows[0];
      if (callBack) callBack(row);
    },
    selectRowEvents(callBack){
      if (this.selectedRows.length===0){
        this.$message.warning("请选择至少一行数据！")
        return false;
      }
      let row = this.selectedRows;
      if (callBack) callBack(row);
    },
    formatDate(row, column) {
      if (column.property==='start'){
        if (row.start===0){
          return "启用"
        }
        else{
          return "封禁"
        }
      }
      if (column.type==='Date'){
        const date = new Date(row.createtime);
        return date.toLocaleString(); // 将日期格式化为本地日期格式
      }
      else{
        return row[column.property]
      }
    },
    // 获取表格列
    GetTablelable(){
      const _this = this;
      let tablelabel = localStorage.getItem(_this.power)
      if (tablelabel){
        _this.Tablelable = JSON.parse(tablelabel)
      }
      else{
        _this.Tablelable = powercolumn[_this.power]
      }
    },
    cellclassname({row, rowIndex}){

    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
    this.LoadData();
    this.GetTablelable();
  },
}
</script>